---
import Banner from "../components/Banner.vue";
import Layout from "../layouts/Layout.astro";
import data from "virtual:json-conf";

const { about, company } = data;

const { swiper, text } = about || {
  swiper: [],
  text: "",
};
---

<Layout>
  <div>
    {swiper.map((item) => <Banner client:only="vue" banners={item} />)}
  </div>
  <div class="col-7 felx w-full container p-60px m-auto">
    <div class="content mt-4px">
      {
        company?.name && (
          <span class="sub-title" lt-lg="ml-16px">
            公司介绍
            <span class="bottomborder" />
          </span>
        )
      }
      <div class="mt-30px <lg:px-16px <lg:mb-16px" set:html={text} />
    </div>
  </div>

  <style scoped>
    @media (min-width: 1024px) {
      .col-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
      }
    }

    .sub-title {
      @apply font-semibold inline-flex text-[#509cff] relative pb-10px;
    }

    .bottomborder {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 100%;
      height: 2px;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      border-radius: 30px;
      background: #509cff;
      z-index: 1;
    }

    .bottomborder::after {
      position: inherit;
      content: "";
      width: 10px;
      height: 10px;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background-color: #509cff;
    }
  </style>
</Layout>
